<template>
  <div class="page-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <el-page-header @back="$router.push('/dashboard')" style="margin-bottom: 20px;">
        <template #content>
          <span style="font-size: 18px; font-weight: 600;">Query Recharge Orders</span>
        </template>
      </el-page-header>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
      <!-- Search and Filter Bar -->
      <el-card style="margin-bottom: 20px;" shadow="hover">
        <el-form :model="searchForm" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="Order ID">
                <el-input
                  v-model="searchForm.orderId"
                  placeholder="Please enter order ID"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="User UID">
                <el-input-number
                  v-model="searchForm.userId"
                  placeholder="Please enter user UID"
                  :min="1"
                  controls-position="right"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="Order Creator">
                <el-input
                  v-model="searchForm.createdByName"
                  placeholder="Please enter order creator name"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="Payment Method">
                <el-select v-model="searchForm.paymentMethod" placeholder="Please select" style="width: 100%;" clearable>
                  <el-option label="Bank Transfer" value="BankTransfer" />
                  <el-option label="QR Code Payment" value="qrPay" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="Order Status">
                <el-select v-model="searchForm.status" placeholder="Please select" style="width: 100%;" clearable>
                  <el-option label="Pending" value="PENDING" />
                  <el-option label="Completed" value="COMPLETED" />
                  <el-option label="Failed" value="FAILED" />
                  <el-option label="Cancelled" value="CANCELLED" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label=" ">
                <el-button type="primary" @click="handleSearch">
                  <el-icon><Search /></el-icon>
                  Search
                </el-button>
                <el-button @click="handleReset" style="margin-left: 10px;">
                  <el-icon><Refresh /></el-icon>
                  Reset
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <!-- Order List -->
      <el-card shadow="hover">
        <template #header>
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <span style="font-size: 16px; font-weight: 600;">Order List</span>
            <div>
              <el-text type="info">Total {{ totalOrders }} orders</el-text>
              <el-button type="primary" size="small" style="margin-left: 16px;" @click="$router.push('/recharge/create')">
                <el-icon><Plus /></el-icon>
                New Order
              </el-button>
            </div>
          </div>
        </template>

        <el-table
          :data="orderList"
          v-loading="loading"
          style="width: 100%"
          stripe
          border
        >
          <el-table-column prop="orderId" label="Order ID" width="180" />
          <el-table-column label="User UID" width="120">
            <template #default="{ row }">
              {{ row.user?.id || row.userId }}
            </template>
          </el-table-column>
          <el-table-column label="Payer Name" width="120">
            <template #default="{ row }">
              {{ row.paymentName || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Payment Channel" width="120">
            <template #default="{ row }">
              <el-tag :type="getChannelTagType(row.paymentChannel)" size="small">
                {{ getPaymentChannelLabel(row.paymentChannel) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="Payment Method" width="140">
            <template #default="{ row }">
              {{ getPaymentMethodLabel(row.paymentMethod) }}
            </template>
          </el-table-column>
          <el-table-column label="Recharge Amount" width="140">
            <template #default="{ row }">
              <span style="color: #f56c6c; font-weight: 600;">¥{{ row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Status" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)">
                {{ getStatusLabel(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="Order Creator" width="150">
            <template #default="{ row }">
              {{ row.createdByName || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="Created Time" width="180">
            <template #default="{ row }">
              {{ formatDate(row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column label="Actions" width="200" fixed="right">
            <template #default="{ row }">
              <el-button size="small" @click="handleViewOrder(row)">
                View
              </el-button>
              <el-button
                size="small"
                type="primary"
                @click="handleProcessOrder(row)"
                v-if="row.status === 'pending'"
              >
                Process
              </el-button>
              <el-button
                size="small"
                type="warning"
                @click="handleCancelOrder(row)"
                v-if="row.status === 'pending' || row.status === 'processing'"
              >
                Cancel
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="margin-top: 20px; display: flex; justify-content: center;">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="totalOrders"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- Order Details Dialog -->
    <el-dialog v-model="showOrderDialog" title="Order Details" width="800px">
      <div v-if="selectedOrder">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="Order ID">{{ selectedOrder.id }}</el-descriptions-item>
          <el-descriptions-item label="Order Number">{{ selectedOrder.orderId }}</el-descriptions-item>
          <el-descriptions-item label="User UID">{{ selectedOrder.userId }}</el-descriptions-item>
          <el-descriptions-item label="Payer Name">{{ selectedOrder.paymentName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="Recharge Amount">
            <span style="color: #f56c6c; font-weight: 600;">¥{{ selectedOrder.amount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="Service Fee" v-if="selectedOrder.payFee">
            <span style="color: #909399;">¥{{ selectedOrder.payFee }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="Payment Method">{{ getPaymentMethodLabel(selectedOrder.paymentMethod) }}</el-descriptions-item>
          <el-descriptions-item label="Bank Card Number" v-if="selectedOrder.transAccNo">
            {{ selectedOrder.transAccNo }}
          </el-descriptions-item>
          <el-descriptions-item label="Bank Code" v-if="selectedOrder.bankCode">
            {{ getBankLabel(selectedOrder.bankCode) }}
          </el-descriptions-item>
          <el-descriptions-item label="Payment Channel">
            <el-tag :type="getChannelTagType(selectedOrder.paymentChannel)" size="small">
              {{ getPaymentChannelLabel(selectedOrder.paymentChannel) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="getPlatOrderLabel(selectedOrder.paymentChannel)">
            {{ selectedOrder.platOrderNum || 'Not generated' }}
          </el-descriptions-item>
          <el-descriptions-item label="Status">
            <el-tag :type="getStatusType(selectedOrder.status)">
              {{ getStatusLabel(selectedOrder.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="Order Creator">{{ selectedOrder.createdByName || 'Unknown' }}</el-descriptions-item>
          <el-descriptions-item label="Created Time">{{ formatDate(selectedOrder.createdAt) }}</el-descriptions-item>
          <el-descriptions-item label="Updated Time">{{ formatDate(selectedOrder.updatedAt) }}</el-descriptions-item>

          <!-- 售卡状态信息 -->
          <el-descriptions-item label="Card Sell Status" v-if="selectedOrder.sellCardStatus">
            <el-tag :type="getSellCardStatusType(selectedOrder.sellCardStatus)">
              {{ getSellCardStatusLabel(selectedOrder.sellCardStatus) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="Gold Coins Sent" v-if="selectedOrder.cardCoins">
            <span style="color: #f39c12; font-weight: 600;">{{ selectedOrder.cardCoins }}M</span>
          </el-descriptions-item>
          <el-descriptions-item label="Player UID" v-if="selectedOrder.playerUid">
            {{ selectedOrder.playerUid }}
          </el-descriptions-item>
          <el-descriptions-item label="Player Nickname" v-if="selectedOrder.playerNickname">
            {{ selectedOrder.playerNickname }}
          </el-descriptions-item>

          <el-descriptions-item label="Remarks" span="2" v-if="selectedOrder.extendParam">
            {{ selectedOrder.extendParam }}
          </el-descriptions-item>
          <el-descriptions-item label="Callback URL" span="2">{{ selectedOrder.notifyUrl || 'None' }}</el-descriptions-item>
        </el-descriptions>

        <!-- Query Payment Status Button -->
        <div style="margin-top: 20px; text-align: center;">
          <el-button
            type="primary"
            :loading="queryingPaymentStatus"
            @click="handleQueryPaymentStatus"
            v-if="selectedOrder.paymentChannel && selectedOrder.orderId"
          >
            <el-icon><Refresh /></el-icon>
            Query {{ getPaymentChannelLabel(selectedOrder.paymentChannel) }} Payment Status
          </el-button>
        </div>

        <!-- Payment Status Query Result -->
        <div v-if="paymentStatusResult" style="margin-top: 20px;">
          <h4>{{ getPaymentChannelLabel(selectedOrder.paymentChannel) }} Payment Status Query Result</h4>
          <el-alert
            :title="paymentStatusResult.success ? 'Query Successful' : 'Query Failed'"
            :type="paymentStatusResult.success ? 'success' : 'error'"
            :description="paymentStatusResult.message"
            show-icon
            style="margin-bottom: 10px;"
          />

          <!-- Auto Card Sell Result Alert -->
          <div v-if="paymentStatusResult.success && paymentStatusResult.data && paymentStatusResult.data.cardSellResult" style="margin-bottom: 15px;">
            <el-alert
              :title="paymentStatusResult.data.cardSellResult.sellCardSuccess ? 'Auto Gold Coins Sent Successfully!' : 'Auto Gold Coins Send Failed'"
              :type="paymentStatusResult.data.cardSellResult.sellCardSuccess ? 'success' : 'warning'"
              :description="paymentStatusResult.data.cardSellResult.message"
              show-icon
              :closable="false"
            />
          </div>

          <el-input
            type="textarea"
            :value="JSON.stringify(paymentStatusResult, null, 2)"
            readonly
            :rows="8"
            style="font-family: monospace;"
          />
        </div>

        <!-- Payment Response Information -->
        <div v-if="selectedOrder.paymentResponse" style="margin-top: 20px;">
          <h4>{{ getPaymentChannelLabel(selectedOrder.paymentChannel) }} Response Information</h4>
          <el-input
            type="textarea"
            :value="selectedOrder.paymentResponse"
            readonly
            :rows="4"
            style="font-family: monospace;"
          />
        </div>
      </div>
      <template #footer>
        <el-button @click="showOrderDialog = false">Close</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useToast } from 'vue-toastification'
import { Search, Refresh, Download, Plus } from '@element-plus/icons-vue'
import { trpc } from '../utils/trpc'

// 响应式数据
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(20)
const totalOrders = ref(0)
const orderList = ref([])
const showOrderDialog = ref(false)
const selectedOrder = ref<any>(null)
const queryingPaymentStatus = ref(false)
const paymentStatusResult = ref<any>(null)

// 搜索表单
const searchForm = ref({
  orderId: '',
  userId: null as number | null,
  paymentMethod: '',
  status: '',
  createdByName: '',
})

// 工具
const toast = useToast()

// 模拟数据
const mockOrders = [
  {
    id: 'ORD001',
    customerEmail: 'customer1@example.com',
    rechargeType: 'phone',
    rechargeAccount: '13800138001',
    amount: 100,
    serviceFee: 2,
    totalAmount: 102,
    operator: 'mobile',
    status: 'completed',
    createdAt: '2024-01-20T10:30:00Z',
    completedAt: '2024-01-20T10:35:00Z',
    remarks: '话费充值订单',
    statusHistory: [
      { status: 'pending', timestamp: '2024-01-20T10:30:00Z', remark: '订单创建' },
      { status: 'processing', timestamp: '2024-01-20T10:32:00Z', remark: '开始处理' },
      { status: 'completed', timestamp: '2024-01-20T10:35:00Z', remark: '充值成功' }
    ]
  },
  {
    id: 'ORD002',
    customerEmail: 'customer2@example.com',
    rechargeType: 'data',
    rechargeAccount: '13800138002',
    amount: 50,
    serviceFee: 1,
    totalAmount: 51,
    operator: 'unicom',
    status: 'pending',
    createdAt: '2024-01-20T11:00:00Z',
    completedAt: null,
    remarks: '流量充值订单',
    statusHistory: [
      { status: 'pending', timestamp: '2024-01-20T11:00:00Z', remark: '订单创建' }
    ]
  }
]

// 方法
function getPaymentChannelLabel(channel: string) {
  const labels: Record<string, string> = {
    'TOPPAY': 'TopPay',
    'PAY668': '668Pay',
    'LSPPAY': 'LSPPAY',
    'HUIFENG': '汇沣支付'
  }
  return labels[channel] || channel
}

function getChannelTagType(channel: string) {
  const types: Record<string, string> = {
    'TOPPAY': 'primary',
    'PAY668': 'success',
    'LSPPAY': 'warning',
    'HUIFENG': 'danger'
  }
  return types[channel] || 'info'
}

function getPlatOrderLabel(channel: string) {
  const labels: Record<string, string> = {
    'TOPPAY': 'TopPay Order Number',
    'PAY668': '668Pay Order Number',
    'LSPPAY': 'LSPPAY Order Number',
    'HUIFENG': 'Huifeng Order Number'
  }
  return labels[channel] || 'Platform Order Number'
}

function getPaymentMethodLabel(method: string) {
  const labels: Record<string, string> = {
    'BankTransfer': 'Bank Transfer',
    'qrPay': 'QR Code Payment'
  }
  return labels[method] || method
}

// 银行标签映射
function getBankLabel(bankCode: string) {
  const bankLabels: Record<string, string> = {
    'BAAC': 'Bank for Agriculture and Agricultural Co-operatives (BAAC)',
    'BAY': 'Bank of Ayudhya Public Company Ltd. (BAY)',
    'BBL': 'Bangkok Bank Public Company Ltd. (BBL)',
    'BNPP': 'BNP Paribas Bangkok Branch (BNPP)',
    'BOA': 'Bank of America NT&SA (BOA)',
    'BOC': 'Bank of China (Thai) PCL (BOC)',
    'BOT': 'Bank of Thailand (BOT)',
    'CHAS': 'JPMorgan Chase Bank, Bangkok Branch (CHAS)',
    'CIMB': 'CIMB Thai Bank Public Company Ltd (CIMB)',
    'CITI': 'Citi Bank N.A (CITI)',
    'DB': 'Deutsche Bank AG (DB)',
    'EXIM': 'Export–Import Bank of Thailand (EXIM)',
    'GHB': 'Government Housing Bank (GHB)',
    'GSB': 'The Government Savings Bank (GSB)',
    'HSBC': 'The Hongkong & Shanghai Corporation Ltd (HSBC)',
    'IACBC': 'Industrial and Commercial Bank of China (Thai) Public Company Limited (IACBC)',
    'ICBC': 'Industrial and Commercial Bank of China (Thai) PCL (ICBC)',
    'IOB': 'Indian Overseas Bank (IOB)',
    'KBANK': 'Kasikornbank PCL (KBANK)',
    'KKP': 'Kiatnakin Bank PCL (KKP)',
    'KTB': 'Krung Thai Bank Public Company Ltd. (KTB)',
    'LHBA': 'Land and Houses Bank (LHBA)',
    'MEGA': 'Mega International Commercial Bank (MEGA)',
    'MHCB': 'Mizuho Corporate Bank (MHCB)',
    'SCB': 'The Siam Commercial Bank Public Company (SCB)',
    'SCBT': 'Standard Chartered Bank Thai PCL (SCBT)',
    'SMBC': 'The Sumitomo Mitsu Banking Corporation (SMBC)',
    'SMTB': 'Sumitomo Mitsui Trust Bank (Thai) PCL (SMTB)',
    'TBNK': 'Thanachart Bank Public Company Limited (TBNK)',
    'TCRB': 'The Thai Credit Retail Bank (TCRB)',
    'TIBT': 'Islamic Bank of Thailand (TIBT)',
    'TISCO': 'TISCO Bank PCL (TISCO)',
    'TMB': 'TMB Bank Public Company Ltd. (TMB)',
    'TTB': 'TMBThanachart Bank Public Company Limited (TTB)',
    'UOB': 'United Overseas Bank (Thai) Public Company Ltd. (UOB)',
    'SME': 'SME (SME)',
    'IBANK': 'IBANK (IBANK)',
    'KRU': 'Krungsri (KRU)',
    // 保持对旧编码的兼容性
    '001': 'Kasikorn Bank (KBANK)',
    '003': 'Bangkok Bank (BBL)',
    '004': 'Krung Thai Bank (KTB)',
    '005': 'ABN Amro Bank (ABN)',
    '007': 'TMBThanachart (TTB)',
    '010': 'Siam Commercial Bank (SCB)',
    '016': 'UOB Bank (UOB)',
    '017': 'Bank of Ayudhya/Krungsri (BAY)',
    '018': 'CIMB Thai Bank (CIMB)',
    '020': 'Land and Houses Bank (LHBANK)',
    '022': 'Government Savings Bank (GSB)',
    '023': 'Kiatnakin Phatra Bank (KKP)',
    '024': 'Citibank (CITI)',
    '025': 'Government Housing Bank (GHB)',
    '026': 'Bank for Agriculture (BAAC)',
    '027': 'Mizuho Corporate Bank (MHCB)',
    '028': 'Islamic Bank of Thailand (IBANK)',
    '029': 'TISCO Bank (TISCO)'
  }
  return bankLabels[bankCode] || bankCode
}

function getStatusType(status: string) {
  const types: Record<string, string> = {
    'PENDING': 'warning',
    'COMPLETED': 'success',
    'FAILED': 'danger',
    'CANCELLED': 'info'
  }
  return types[status] || 'info'
}

function getStatusLabel(status: string) {
  const labels: Record<string, string> = {
    'PENDING': 'Pending',
    'COMPLETED': 'Completed',
    'FAILED': 'Failed',
    'CANCELLED': 'Cancelled'
  }
  return labels[status] || status
}

// 售卡状态相关函数
function getSellCardStatusType(status: string) {
  const types: Record<string, string> = {
    'SUCCESS': 'success',
    'FAILED': 'danger',
    'PENDING': 'warning'
  }
  return types[status] || 'info'
}

function getSellCardStatusLabel(status: string) {
  const labels: Record<string, string> = {
    'SUCCESS': 'Gold Coins Sent',
    'FAILED': 'Send Failed',
    'PENDING': 'Pending'
  }
  return labels[status] || status
}

function formatDate(dateString?: string) {
  if (!dateString) return 'Not completed'

  const date = new Date(dateString)
  return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// Load order list
async function loadOrders() {
  loading.value = true
  try {
    const result = await trpc.recharge.query.query({
      orderId: searchForm.value.orderId || undefined,
      userId: searchForm.value.userId || undefined,
      status: (searchForm.value.status && searchForm.value.status !== '') ? searchForm.value.status as 'PENDING' | 'COMPLETED' | 'FAILED' | 'CANCELLED' : undefined,
      createdByName: searchForm.value.createdByName || undefined,
      page: currentPage.value,
      limit: pageSize.value,
    })

    if (result.success) {
      orderList.value = result.data.records
      totalOrders.value = result.data.total
    } else {
      toast.error(result.message || 'Query failed')
    }
  } catch (error) {
    console.error('Failed to load orders:', error)
    toast.error('Failed to load order list')
  } finally {
    loading.value = false
  }
}

// Event handling functions
function handleSearch() {
  currentPage.value = 1
  loadOrders()
  toast.success('Search completed')
}

function handleReset() {
  searchForm.value = {
    orderId: '',
    userId: null,
    paymentMethod: '',
    status: '',
    createdByName: '',
  }
  currentPage.value = 1
  loadOrders()
}

function handleExport() {
  toast.info('Export function is under development...')
}

function handleViewOrder(order: any) {
  selectedOrder.value = order
  paymentStatusResult.value = null // Reset query result
  showOrderDialog.value = true
}

// Query payment status
async function handleQueryPaymentStatus() {
  if (!selectedOrder.value) return

  queryingPaymentStatus.value = true
  paymentStatusResult.value = null

  try {
    let result

    // Call different query APIs based on payment channel
    if (selectedOrder.value.paymentChannel === 'PAY668') {
      result = await trpc.recharge.queryPay668Status.mutate({
        orderId: selectedOrder.value.orderId
      })
    } else if (selectedOrder.value.paymentChannel === 'TOPPAY') {
      result = await trpc.recharge.queryTopPayStatus.mutate({
        orderId: selectedOrder.value.orderId
      })
    } else if (selectedOrder.value.paymentChannel === 'LSPPAY') {
      result = await trpc.recharge.queryLspPayStatus.mutate({
        orderId: selectedOrder.value.orderId
      })
    } else if (selectedOrder.value.paymentChannel === 'HUIFENG') {
      result = await trpc.recharge.queryHuifengStatus.mutate({
        orderId: selectedOrder.value.orderId
      })
    } else if (selectedOrder.value.paymentChannel === 'NASKI') {
      result = await trpc.recharge.queryNaskiStatus.mutate({
        orderId: selectedOrder.value.orderId
      })
    } else {
      toast.error('Unsupported payment channel')
      return
    }

    paymentStatusResult.value = result

    if (result.success) {
      let successMessage = 'Payment status query successful'

      // 检查是否有自动发金币的结果
      if (result.data && result.data.cardSellResult) {
        if (result.data.cardSellResult.success) {
          if (result.data.cardSellResult.sellCardSuccess) {
            successMessage += ' - Gold coins automatically sent to player!'
            toast.success(successMessage, { timeout: 5000 })
          } else {
            toast.warning(`Payment status query successful, but auto card sell failed: ${result.data.cardSellResult.message}`, { timeout: 8000 })
          }
        } else {
          toast.warning(`Payment status query successful, but auto card sell error: ${result.data.cardSellResult.message}`, { timeout: 8000 })
        }
      } else {
        toast.success(successMessage)
      }

      // Refresh order list to get latest status
      await loadOrders()
      // Update currently selected order information
      const updatedOrder = orderList.value.find((order: any) => order.orderId === selectedOrder.value.orderId)
      if (updatedOrder) {
        selectedOrder.value = updatedOrder
      }
    } else {
      toast.error(result.message || 'Payment status query failed')
    }
  } catch (error) {
    console.error('Payment status query failed:', error)
    toast.error('Payment status query failed')
    paymentStatusResult.value = {
      success: false,
      message: error instanceof Error ? error.message : 'Unknown error',
      error: error
    }
  } finally {
    queryingPaymentStatus.value = false
  }
}

function handleProcessOrder(order: any) {
  toast.info(`Process order ${order.id} function is under development...`)
}

function handleCancelOrder(order: any) {
  toast.info(`Cancel order ${order.id} function is under development...`)
}

function handleSizeChange(newSize: number) {
  pageSize.value = newSize
  loadOrders()
}

function handleCurrentChange(newPage: number) {
  currentPage.value = newPage
  loadOrders()
}

// 组件挂载
onMounted(() => {
  loadOrders()
})
</script>

<style scoped>
.page-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.main-content {
  max-width: 1400px;
  margin: 0 auto;
}
</style>
